@import '~@wordpress/base-styles/breakpoints';
@import '~@wordpress/base-styles/mixins';

.domains__step-section-wrapper {
	margin: 0 auto;
	max-width: 720px;
}

.is-section-signup .domains__step-content {
	margin-bottom: 50px;

	&.domains__step-content-domain-step-test {
		margin-bottom: 20px;
	}

	.search .search__icon-navigation {
		background: none;
	}

	.register-domain-step__search-card {
		border-radius: 2px;
		@include elevation( 2dp );
	}

	.search.is-open.has-focus {
		border: none;
		border-radius: 2px;
		box-shadow: 0 0 0 3px var( --color-accent-light );
	}

	.search-filters__dropdown-filters {
		border-radius: 0 3px 3px 0;
	}

	.search-filters__dropdown-filters.search-filters__dropdown-filters--is-open {
		box-shadow: 0 0 0 3px var( --color-accent-light );
	}

	@include breakpoint-deprecated( '<660px' ) {
		.register-domain-step__search-card,
		.search.is-open.has-focus {
			border-radius: 0;
		}
	}
}

/**
 * Styles for design reskin
 * The `is-white-signup` class is attached to the body when the user is assigned the `reskinned` group of the `reskinSignupFlow` a/b test
 */
body.is-section-signup.is-white-signup {

	$light-white: #f3f4f5;

	.signup__step.is-domains .formatted-header {
		margin-bottom: 30px;
	}

	.domains__step-content {
		.search.is-open.has-focus {
			box-shadow: 0 0 0 2px  var( --color-accent );
			background: var( --color-surface );
			.search__input {
				background: var( --color-surface );
			}
		}
		.register-domain-step__search-card {
			background: $light-white;
			box-shadow: 0 0 0 1.5px  var( --color-neutral-10 );
			border-radius: 2px;
			margin: 20px;

			@include break-mobile {
				margin: initial;
			}
		}
		.search__input {
			background:  $light-white;
			&::placeholder {
				color: var( --color-neutral-100 );
			}
		}
		.search.is-open .search__input-fade.ltr::before {
			display: none;
		}
		.search__open-icon {
			transform: scaleX( -1 );
		}
		.search__close-icon {
			display: none;
		}
	}

	.search-filters__dropdown-filters {
		border: none;

		&.search-filters__dropdown-filters--is-open {
			box-shadow: none;
		}

		.button {
			flex-direction: row;

			&:hover, &:focus {
				box-shadow: none;
			}

			.search-filters__dropdown-filters-button-text {
				color: var( --color-neutral-60 );
				padding-left: 6px;
			}
		}
	}

	.search-filters__popover {
		$accent-blue: #117ac9;
		.button.is-primary {
			background: $accent-blue;
			border-color: $accent-blue;
		}
		.popover__arrow {
			display: none;
		}
	}
}